<template>
  <div class="right-content">
    <div id="About-me">
      <div id="Aboutleft">
        <el-button
          v-for="(item, index) in btnList"
          :key="index"
          @click="gotoAbout(index)"
        >
          {{item}}
        </el-button>
      </div>
      <div id="Aboutright">
        <!-- <router-view></router-view> -->
        <pro-data v-if="prodataVisible"></pro-data>
        <!-- <account-setting v-if="accountsettingVisible"></account-setting> -->
        <login-log v-if="loginlogVisible"></login-log>
        <pro-cards v-if="procardsVisible" ref="ProCards" :id='user.id'></pro-cards>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardFile',
  data() {
    return {
      btnList: ['个人资料', '登录记录', '名片夹收藏'],
      prodataVisible: true,
      // accountsettingVisible: true,
      loginlogVisible: false,
      procardsVisible: false,
      user: {}
    }
  },
  components: {
    ProData: resolve => require(['../ProFile/pro-data'], resolve),
    // AccountSetting: resolve => require(['../ProFile/account-setting'], resolve),
    LoginLog: resolve => require(['../ProFile/login-log'], resolve),
    ProCards: resolve => require(['../ProFile/pro-cards'], resolve)
  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  methods: {
    gotoAbout(index) {
      if (index === 0) {
        this.prodataVisible = true
        this.accountsettingVisible = false
        this.loginlogVisible = false
        this.procardsVisible = false
      } else if (index === 1) {
        this.prodataVisible = false
        this.accountsettingVisible = false
        this.loginlogVisible = true
        this.procardsVisible = false
      } else if (index === 2) {
        this.prodataVisible = false
        this.accountsettingVisible = false
        this.loginlogVisible = false
        this.procardsVisible = true
      }
    }
  }
}
</script>

<style>
#About-me {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  height: 86.5vh;
  overflow: hidden;
}
#Aboutleft {
  display: inline-block;
  display: flex;
  flex-direction: column;
  width: 15%;
  height: 86.5vh;
  box-sizing: border-box;
  border-right: 1px solid rgba(222,225,230);
}
#Aboutleft > .el-button {
  display: inline-block;
  width: 100%;
  border: none;
  margin-left: 0px;
  margin-top: 1vh;
  color: #606266;
  font: 18px '宋体';
}
#Aboutleft > .el-button:hover {
  background-color: rgba(236,238,239);
}
#Aboutright {
  display: inline-block;
  width: 86%;
  height: 86.5vh;
  overflow: hidden;
}
</style>
